<template>
  <my-dialog :title="title"
             :width="width"
             :height="height"
             :visible.sync="currVisible"
             :footer="footer"
             :maximizable="maximizable"
             :draggable="draggable"
             :theme="theme"
             ref="dialog"
             target="body"
             class="screen-dialog"
             modal
             v-bind="$attrs">
      <slot>
        <component :is="comp"
                   @cancel="onCancel"
                   v-bind="props"
                   @on-ok="onOK" />
      </slot>
  </my-dialog>
</template>

<script>
export default {
  name: 'screen-dialog',
  cnName: 'screen-dialog',
  props: {
    title: String,
    comp: {
      type: Object,
      default: null
    },
    width: {
      type: String,
      default: '60%'
    },
    height: {
      type: String,
      default: '70%'
    },
    visible: {
      type: Boolean
    },
    props: Object,
    theme: {
      type: String,
      default: 'light'
    },
    draggable: {
      type: Boolean,
      default: true
    },
    maximizable: {
      type: Boolean,
      default: true
    },
    footer: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currVisible: this.visible
    }
  },
  methods: {
    onOK(data, refresh) {
      this.$emit('on-ok', data, refresh)
    },
    onCancel() {
      this.currVisible = false
      this.$emit('cancel')
    },
    modalClick() {
      this.onCancel()
    },
    addEvent() {
      const el = this.$refs.dialog.$el
      this.modalEl = el.querySelector('.my-dialog__modal')
      this.modalEl.addEventListener('click', this.modalClick)
    },
    removeEvent() {
      if(this.modalEl) {
        this.modalEl.removeEventListener('click', this.modalClick)
        this.modalEl = null
      }
    }
  },
  watch: {
    currVisible(val) {
      this.$emit('update:visible', val)
      if(val === false) {
        this.onCancel()
      }
    },
    visible(val) {
      this.currVisible = val
      if(val) {
        this.$nextTick(_ => {
          this.addEvent()
        })
      } else {
        this.$nextTick(_ => {
          this.removeEvent()
        })
      }
    }
  },
  computed: {},
  mounted() {
  }
}
</script>

<style lang="scss">
.screen-dialog {
  color: #FFF;
  position: fixed !important;
  display: block;
  z-index: 1000 !important;

  .my-dialog-panel {
    background: url("~@/assets/job/dialog-bg.png") no-repeat;
    background-size: 100% 100%;
  }
  .my-dialog-panel__tool {
    top: 10px;
  }

  .my-dialog-panel.is-light .my-dialog-panel__title {
    color: #FFF;
    font-size: 20px;
    font-weight: bold;
    margin-top: -10px;
  }

  .my-dialog-panel__tool .my-icon.icon-window {
    background: url("~@/assets/job/min.png") no-repeat;
    background-size: 100% 100%;
    height: 17px;
    width: 17px;
    border-radius: 0;

    svg {
      display: none;
    }
  }
  .my-dialog-panel__tool .my-icon.icon-maximize   {
    background: url("~@/assets/job/max.png") no-repeat;
    background-size: 100% 100%;
    height: 17px;
    width: 17px;
    border-radius: 0;

    svg {
      display: none;
    }
  }
  .my-dialog-panel__tool .my-icon.icon-close {
    background: url("~@/assets/job/close.png") no-repeat;
    background-size: 100% 100%;
    height: 17px;
    width: 17px;

    svg {
      display: none;
    }
  }
  .my-dialog-panel.is-light .my-dialog-panel__header:after {
    display: none;
  }

  .my-layout.is-vertical .my-layout__north {
    height: 30px !important;
    padding-top: 15px !important;
    padding-left: 10px !important;
  }

  .my-spin.is-fit .my-spin__container {
    padding: 10px;
  }
}
</style>
